<template>
  <div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="84px"
      @submit.native.prevent
    >
      <el-form-item label="企业名称" prop="comName">
        <el-input
          v-model="queryParams.comName"
          placeholder="请输入参展企业名称"
          clearable
          :style="{ width: isPhoneType ? '' : '170px' }"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="信用代码" prop="idCard">
        <el-input
          v-model="queryParams.idCard"
          placeholder="请输入统一社会信用代码"
          clearable
          :style="{ width: isPhoneType ? '' : '200px' }"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="参展年限" prop="joinYear">
        <el-select
          :style="{ width: isPhoneType ? '' : '160px' }"
          v-model="queryParams.joinYear"
          placeholder="请选择参展年限"
          @change="selectYear"
        >
          <el-option
            v-for="item in dict.type.sys_exhibit_year"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="展区名称：" prop="deptId">
        <treeselect
          v-model="queryParams.deptId"
          :options="deptOptions"
          :show-count="true"
          placeholder="请选择展区名称"
          :style="{ width: isPhoneType ? '215px' : '180px' }"
        />
      </el-form-item>
      <el-form-item label="审核状态" prop="status">
        <el-select
          :style="{ width: isPhoneType ? '' : '160px' }"
          v-model="queryParams.status"
          placeholder="审核状态"
          clearable
          @change="selectStatus"
        >
          <el-option
            v-for="dict in dict.type.sys_apply_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list">
      <el-table-column
        label="操作"
        align="center"
        width="100"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          />
          <el-button
            v-if="scope.row.status != 1 && scope.row.status != 3"
            type="text"
            icon="el-icon-edit-outline"
            @click="handleUpdate(scope.row)"
          />
          <el-button
            v-if="scope.row.status != 1 && scope.row.status != 3"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="展区名称"
        align="center"
        prop="deptName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="参展企业名称"
        align="center"
        prop="comName"
        width="200"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ scope.row.comName || "-" }}
        </template>
      </el-table-column>
      <el-table-column
        label="联系人"
        align="center"
        prop="name"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ scope.row.name || "-" }}
        </template>
      </el-table-column>
      <el-table-column
        label="电话"
        align="center"
        prop="mobile"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ scope.row.mobile || "-" }}
        </template>
      </el-table-column>
      <el-table-column
        label="地址"
        align="center"
        prop="address"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ scope.row.address || "-" }}
        </template>
      </el-table-column>
      <el-table-column
        label="报名时间"
        align="center"
        prop="createTime"
        width="165"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="审核状态"
        align="center"
        prop="status"
        :show-overflow-tooltip="true"
        width="90"
      >
        <template slot="header" slot-scope="scope">
          审核状态
          <el-tooltip
            content="审核通过后，如发现信息填报错误请联系上级单位对信息进行删除，重新上传信息。重新上传的信息需要二次审核"
            placement="top"
          >
            <i class="el-icon-question cp"></i>
          </el-tooltip>
        </template>

        <template slot-scope="scope">
          <span v-if="scope.row.status === 0" class="gray">待审核</span>
          <span v-if="scope.row.status === 1" class="green">市级通过</span>
          <span v-if="scope.row.status === 2" class="red">市级驳回</span>
          <span v-if="scope.row.status === 3" class="green">省级通过</span>
          <span v-if="scope.row.status === 4" class="red">省级驳回</span>
        </template>
      </el-table-column>
      <el-table-column
        label="审核意见"
        align="center"
        prop="auditInfo"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0"> -</span>
          <span v-if="scope.row.status === 1 || scope.row.status === 2">
            {{ scope.row.cityAuditInfo || "-" }}
          </span>
          <span v-if="scope.row.status === 3 || scope.row.status === 4">
            {{ scope.row.auditInfo || "-" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="审核人员"
        align="center"
        prop="auditBy"
        width="90"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0"> -</span>
          <span v-if="scope.row.status === 1 || scope.row.status === 2">
            {{ scope.row.cityAudit || "-" }}
          </span>
          <span v-if="scope.row.status === 3 || scope.row.status === 4">
            {{ scope.row.auditBy || "-" }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      :width="isPhoneType ? '100%' : '800px'"
      append-to-body
      class="auto-dialog"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="98px"
        style="margin-top: -30px"
        :label-position="isPhoneType ? 'top' : 'right'"
        :class="isPhoneType ? 'paper_phone_css' : ''"
      >
        <el-divider content-position="left">
          <div class="m-title">填报信息：</div>
        </el-divider>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="展区名称：" prop="deptId">
              <treeselect
                v-model="form.deptId"
                :options="deptOptions"
                :show-count="true"
                placeholder="请选择展区名称"
                :flat="true"
                :normalizer="myNormalizer"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <div class="dashed"></div>
        <el-divider content-position="left">
          <div class="m-title">企业信息：</div>
        </el-divider>
        <el-row :gutter="10">
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="企业名称：" prop="comName">
              <el-input
                v-model="form.comName"
                placeholder="请输入参展企业名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="法人代表：" prop="orgName">
              <el-input v-model="form.orgName" placeholder="请输入法人代表" />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="信用代码：" prop="idCard">
              <el-input
                v-model="form.idCard"
                placeholder="请输入统一社会信用代码"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人：" prop="name">
              <el-input v-model="form.name" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话：" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="地址：" prop="address">
              <el-input v-model="form.address" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="营业执照：" ref="workViod">
              <div>
                <div
                  v-if="form.workUrl"
                  style="width: 100px; height: 100px; position: relative"
                >
                  <div v-if="form.workUrl" class="demo-image__preview w100-img">
                    <el-image
                      :src="form.workUrl"
                      :preview-src-list="[form.workUrl]"
                      class="avatar"
                    >
                    </el-image>
                  </div>
                  <i
                    v-if="form.workUrl"
                    class="el-icon-delete remove-img"
                    @click="removeWorkUrl"
                  />
                </div>
                <uploadBig
                  v-else
                  :showBtn="true"
                  btnText="上传图片"
                  upWidth="50px"
                  upHeight="30px"
                  upLineHeight="30px"
                  :accept="uploadAccept"
                  :showFileList="false"
                  :fileSize="5"
                  @getUpload="uploadWorkUrl"
                />
              </div>
              <div class="w100 small-text" style="line-height: normal">
                提示：建议上传图片大小不超过
                <span class="red">5M！</span> ， 格式为
                <span class="red">{{ uploadAccept }}</span>
                的文件
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="企业封面：" prop="avgUrl" ref="avgViod">
              <div>
                <div
                  v-if="form.avgUrl"
                  style="width: 100px; height: 100px; position: relative"
                >
                  <div v-if="form.avgUrl" class="demo-image__preview w100-img">
                    <el-image
                      :src="form.avgUrl"
                      :preview-src-list="[form.avgUrl]"
                      class="avatar"
                    >
                    </el-image>
                  </div>
                  <i
                    v-if="form.avgUrl"
                    class="el-icon-delete remove-img"
                    @click="removeAvgUrl"
                  />
                </div>
                <uploadBig
                  v-else
                  :showBtn="true"
                  btnText="上传图片"
                  upWidth="50px"
                  upHeight="30px"
                  upLineHeight="30px"
                  :accept="uploadAccept"
                  :showFileList="false"
                  :fileSize="5"
                  @getUpload="uploadAvgUrl"
                />
              </div>
              <div class="w100 small-text" style="line-height: normal">
                提示：建议上传图片大小不超过
                <span class="red">5M！</span> ，宽度不超过
                <span class="red">570px</span>， 格式为
                <span class="red">{{ uploadAccept }}</span>
                的文件
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="企业简介：" prop="companyInfo">
              <el-input
                v-model="form.companyInfo"
                type="textarea"
                placeholder="请输入企业简介，不超过500字"
                :rows="4"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>

        <div class="mb20 ml20 mr20">
          <ul>
            <li>注意：</li>
            <li>
              1.参展商请填写展区、展位号（例：太原展区或一带一路展区8号展位；无展位号的不填）；
            </li>
            <li>
              2.*号项为必填项，否则无法上传。填报信息必须真实有效，否则无法通过审核。
            </li>
          </ul>
        </div>

        <div class="dashed"></div>

        <el-divider content-position="left">
          <div class="m-title">展区信息：</div>
        </el-divider>
        <el-row :gutter="10">
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="展区：">
              <el-input v-model="form.showArea" placeholder="请输入展区" />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="展位号：">
              <el-input v-model="form.showNum" placeholder="请输入展位号" />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="展品种类：" prop="showType">
              <el-input v-model="form.showType" placeholder="请输入展品种类" />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="展品数量：" prop="showNumber">
              <el-input
                v-model="form.showNumber"
                placeholder="请输入展品数量"
              />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="展品名称：">
              <el-input v-model="form.showName" placeholder="请输入展品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="参展年限：" prop="joinYear">
              <el-select
                v-model="form.joinYear"
                placeholder="请选择参展年限"
                class="w100"
              >
                <el-option
                  v-for="item in dict.type.sys_exhibit_year"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="展品图片：" prop="showUrl">
              <ul
                v-if="showUrlList && showUrlList.length != 0"
                class="more-big-list"
              >
                <li v-for="(item, index) in showUrlList" :key="index">
                  <div v-if="item.img" class="demo-image__preview">
                    <el-image
                      :src="item.img"
                      :preview-src-list="[item.img]"
                      class="avatar"
                    />
                  </div>
                  <el-input
                    v-model="item.info"
                    placeholder="请输入1~40字的图片简介"
                    :maxlength="40"
                    size="small"
                    clearable
                  />
                  <i
                    class="el-icon-delete remove-img"
                    @click="handleRemoveMore(index)"
                  />
                </li>
              </ul>
              <ul class="w100 fl">
                <div>
                  <uploadBig
                    :showBtn="true"
                    btnText="上传展品图片"
                    upWidth="104px"
                    upHeight="30px"
                    upLineHeight="30px"
                    :accept="uploadAccept"
                    :showFileList="false"
                    :fileSize="5"
                    @getUpload="uploadMoreImg"
                  />
                </div>
                <div class="w100 small-text">
                  提示：建议上传分辨率为
                  <span class="red">1012*672</span>
                  ，图片大小不超过<span>5M!</span>， 格式为
                  <span class="red">{{ uploadAccept }}</span>
                  的文件
                </div>
              </ul>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="自有平台电商链接：" prop="ownUrl">
              <el-input
                v-model="form.ownUrl"
                placeholder="请输入自有平台电商链接"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="btnLoading">
          确 定
        </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情— -->
    <el-dialog
      title="查看填报信息"
      :visible.sync="detailOpen"
      width="800px"
      append-to-body
      class="auto-dialog"
      :width="isPhoneType ? '100%' : '800px'"
    >
      <detailDialog
        ref="detailInfo"
        :detailForm="detailForm"
        :isPhoneType="isPhoneType"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  applyList,
  applyInfo,
  editApply,
  removeApply,
} from "@/api/project/paper";
import { deptTreeSelect } from "@/api/system/user";

import detailDialog from "@/components/Project/dialog/detail/company";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { checkMobile } from "@/utils/index";

export default {
  name: "User",
  dicts: ["sys_apply_status", "sys_exhibit_year"],
  components: { Treeselect, detailDialog },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        comName: undefined,
        showArea: undefined,
        status: undefined,
        userType: 2,
        joinYear: "2025",
        dataType: undefined,
        idCard: undefined,
        deptId: undefined,
        sig: 1,
      },
      // 0-参展人 1-采购商 2-参展企业
      // 总条数
      total: 0,
      list: [],

      // 弹出层标题
      title: "",
      open: false,
      form: {},
      btnLoading: false,

      // 表单校验
      rules: {
        deptId: [{ required: true, message: "请选择展区", trigger: "change" }],
        comName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        orgName: [
          { required: true, message: "请输入法人代表", trigger: "blur" },
        ],
        idCard: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入电话", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        avgUrl: [
          { required: true, message: "请上传企业封面", trigger: "blur" },
        ],
        companyInfo: [
          { required: true, message: "请输入企业简介", trigger: "blur" },
        ],
        showType: [
          { required: true, message: "请输入展品种类", trigger: "blur" },
        ],
        showNumber: [
          { required: true, message: "请输入展品数量", trigger: "blur" },
        ],
        ownUrl: [
          {
            required: true,
            message: "请输入自有平台电商链接",
            trigger: "blur",
          },
        ],
        joinYear: [
          { required: true, message: "请选择参展年限", trigger: "change" },
        ],
        showUrl: [
          { required: true, message: "请上传展品图片", trigger: "blur" },
        ],
      },

      detailForm: {},
      detailOpen: false,

      showUrlList: [],
      uploadAccept: ".png, .jpg, .jpeg",
      // 部门树选项
      deptOptions: [],

      isPhoneType: false,
    };
  },

  watch: {
    "queryParams.deptId": "selectDept",
  },

  created() {
    this.isPhoneType = checkMobile();
    this.getList();
    this.getDeptTree();
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      applyList(this.queryParams)
        .then((response) => {
          this.list = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect({ flag: this.queryParams.sig }).then((response) => {
        this.deptOptions = response.data;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        partId: undefined,
        deptId: undefined,
        comName: undefined,
        orgName: undefined,
        idCard: undefined,
        name: undefined,
        mobile: undefined,
        address: undefined,
        workUrl: undefined,
        avgUrl: undefined,
        companyInfo: undefined,
        showArea: undefined,
        showNum: undefined,
        showType: undefined,
        showNumber: undefined,
        showName: undefined,
        joinYear: "2025",
        showUrl: undefined,
        userType: this.queryParams.userType,
        sig: this.queryParams.sig,
      };
      this.resetForm("form");
      this.showUrlList = [];
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();

      applyInfo(row.partId).then((response) => {
        this.form = response.data;
        this.form.joinYear = JSON.stringify(response.data.joinYear);

        if (response.data.showUrl) {
          this.showUrlList = JSON.parse(response.data.showUrl);
        } else {
          this.showUrlList = [];
        }

        this.form.sig = this.queryParams.sig;
        this.open = true;
        this.title = "修改参展企业报名";
      });
    },

    /** 提交按钮 */
    submitForm: function () {
      if (this.showUrlList.length != 0) {
        this.form.showUrl = JSON.stringify(this.showUrlList);
      } else {
        this.form.showUrl = "";
      }

      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;

          if (this.form.partId != undefined) {
            editApply(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              })
              .finally(() => {
                this.btnLoading = false;
              });
          } else {
            addApply(this.form)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              })
              .finally(() => {
                this.btnLoading = false;
              });
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const partIds = row.partId || this.ids;
      this.$modal
        .confirm("是否确认删除选中的数据项？")
        .then(function () {
          return removeApply(partIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    // 上传营业执照
    uploadWorkUrl(data) {
      this.form.workUrl = data;
      this.$refs.workViod.clearValidate();
    },
    // 移除营业执照
    removeWorkUrl() {
      this.form.workUrl = undefined;
    },

    // 企业封面上传
    uploadAvgUrl(data) {
      this.form.avgUrl = data;
      this.$refs.avgViod.clearValidate();
    },

    // 移除企业封面
    removeAvgUrl() {
      this.form.avgUrl = undefined;
    },

    // 图片相册上传
    uploadMoreImg(data) {
      this.showUrlList.push({
        img: data,
        info: undefined,
      });
    },

    // 移除图片相册
    handleRemoveMore(index) {
      this.showUrlList.splice(index, 1);
    },

    // 选择状态
    selectStatus() {
      this.getList();
    },

    // 查看详情
    handleView(row) {
      applyInfo(row.partId).then((res) => {
        this.detailForm = res.data;
        if (res.data.showUrl) {
          this.detailForm.imgList = JSON.parse(res.data.showUrl);
        } else {
          this.detailForm.imgList = [];
        }
        this.detailOpen = true;
      });
    },

    selectYear() {
      this.getList();
    },

    // 选择展区名称
    selectDept() {
      this.getList();
    },

    myNormalizer(node) {
      return {
        id: node.id,
        label: node.label,
        parentId: node.parentId,
        isDisabled: node.children != undefined,
        children: node.children,
      };
    },
  },
};
</script>

<style>
.paper_phone_css .el-form-item {
  margin-bottom: 10px;
}
</style>

<style scoped>
.paper_phone_css .more-big-list {
  width: 100%;
}
.paper_phone_css .more-big-list li {
  width: 100%;
  max-height: fit-content;
}

.paper_phone_css .more-big-list li .demo-image__preview {
  height: 110px;
}
</style>
